<script setup lang="ts">
import { useRoute } from 'vue-router'
import { getCurrentInstance, ref, watch, watchEffect, onMounted } from 'vue'
const route = useRoute()
const { proxy } = getCurrentInstance()

/* ---- */
const logUser = proxy.$Store.get('logUser') || {}

/* ---- */
const animName = ref()
const user = {
  telphone: '',
  wechat_img: ''
}
// ----
const curIndex = ref()
const curTabs = ref()
// ----
const items = ref([])

/* ---- */
const layer = ref()
const layerBox = ref()

/* ---- */
const getCurrencyInfo = async () => {
  // --获取信息--
  const forUserData = { params: { 'DealerSearch[id]': proxy.$route.query.dealer_id } }
  await proxy.$Axios.all([
    proxy.$Axios.get('dealer/index', forUserData)
  ]).then(proxy.$Axios.spread((userData) => {
    const UData = userData.items[0] || {}
    proxy.$Myfun.getJsonData(UData.wechat_img, (resJson) => { user.wechat_img = resJson[0].image })
    user.telphone = UData.tag || UData.telphone
  })).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  items.value = [{
    show: true,
    name: '选购',
    icon: 'fa fa-cart-plus',
    callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'GoodsHome', { dealer_id: proxy.$route.query.dealer_id }) }
  }, {
    show: true,
    name: '咨询',
    icon: 'fa fa-phone-volume',
    callback: () => {
      let options = {
        title: proxy.$Global.layer.titleTwo + user.telphone,
        content: proxy.$Global.layer.conEver,
        button: [{
          text: proxy.$Global.layer.btnCancel
        }, {
          text: proxy.$Global.layer.btnAsk,
          class: 'xw-color-24',
          callback: () => { window.location.href = 'tel:' + user.telphone }
        }]
      }
      if (user.wechat_img) {
        options = {
          title: proxy.$Global.layer.titleFour,
          content: '<div style="padding: 0 2.4rem;"><img src="' + user.wechat_img + '" style="width: 100%;"/></div>',
          button: [{
            text: proxy.$Global.layer.btnCancel
          }, {
            text: proxy.$Global.layer.btnAsk,
            class: 'xw-color-24',
            callback: () => { window.location.href = 'tel:' + user.telphone }
          }]
        }
      }
      proxy.$Myfun.isIndepth(layerBox.value, 'open', options)
    }
  }, {
    show: true,
    name: '位置',
    icon: 'fa fa-location-dot',
    callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'GoodsMap', { dealer_id: proxy.$route.query.dealer_id }) }
  }, {
    show: true,
    name: '我的',
    icon: 'fa fa-user',
    callback: () => { proxy.$Myfun.openPage(proxy, 'push', 'UserCent', { dealer_id: proxy.$route.query.dealer_id }) }
  }]
}

/* ---- */
watch(() => route.meta, (to, from) => {
  const toIndex = to.index
  const fromIndex = from.index || toIndex
  if (Number(toIndex) >= Number(fromIndex)) {
    animName.value = 'slide-left'
  } else {
    animName.value = 'slide-right'
  }
})
watchEffect(() => {
  animName.value = 'slide-left'
  curIndex.value = Number(proxy.$Forindex)
  curTabs.value = route.meta.tabs || false
})

/* ---- */
onMounted(() => {
  getCurrencyInfo()
})
</script>

<template>
  <div>
    <router-view v-slot="{ Component }">
      <transition :name="animName">
        <component :is="Component" />
      </transition>
    </router-view>
    <tabs-view :cur-index="curIndex" :cur-tabs="curTabs" :items="items"/>
    <layer-view ref="layer"/>
    <layer-view ref="layerBox"/>
  </div>
</template>
